<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="search">
			<u-search placeholder="请输入负责人姓名或电话" v-model="search" @custom="onGetCharge" @search="onGetCharge"></u-search>
		</view>
		<!-- 列表 -->
		<view class="order" v-if="charge.length > 0">
			<view class="item" v-for="(item,index) in charge" :key="index">
				<view class="tips success">已关联</view>
				<view class="header">
					<view class="title">{{ item.name }}</view>
				</view>
				<view class="content">
					<view class="line">
						<view class="label">联系电话</view>
						<view class="value">{{ item.mobile }}</view>
					</view>
					<view class="line">
						<view class="label">联系邮箱</view>
						<view class="value">{{ item.email }}</view>
					</view>
					<view class="line">
						<view class="label">证件号码</view>
						<view class="value">{{ item.certificate_number }}</view>
					</view>
					<view class="line">
						<view class="label">紧急联系</view>
						<view class="value">{{ item.emergency_contact }}</view>
					</view>
				</view>
			</view>
		</view>
		<block v-else>
			<u-empty text="暂无更多数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</block>
	</view>
</template>

<script>
	import {
		lists
	} from "@/api/charge.js";
	export default {
		data() {
			return {
				search: '',
				page: 1,
				is_reach: false,
				last_page: 1,
				charge: [],
				tabs: [{
					name: '全部备案',
				}, {
					name: '未支付',
				}, {
					name: '进行中'
				}, {
					name: '已备案'
				}]
			};
		},
		onLoad() {
			let _this = this
			_this.onGetCharge()
		},
		onPullDownRefresh() {
			let _this = this
			_this.page = 1;
			_this.onGetCharge()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			let _this = this
			if (_this.last_page >= _this.page) {
				return false;
			}
			_this.is_reach = true
			_this.page = _this.page + 1
			_this.onGetCharge()
		},
		methods: {
			onCharge() {
				uni.navigateTo({
					url: '/pages/charge/form/index?id='
				})
			},
			onGetCharge() {
				let _this = this
				lists({
					name: _this.search,
					page: _this.page,
					limit: 15
				}).then(res => {
					_this.last_page = res.data.last_page
					if (_this.is_reach) {
						_this.charge = [..._this.charge, ...res.data.data]
					} else {
						_this.charge = res.data.data
					}
					_this.is_reach = false
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 160rpx;
	}


	.search {
		background-color: #fff;
		padding: 30rpx;
	}

	.submit {
		width: 100%;
		position: fixed;
		bottom: 30rpx;

		.btn {
			width: 90%;
			margin: 30rpx auto;

			.u-button {
				height: 100rpx;
			}
		}
	}

	.order {
		width: 92%;
		margin: 0 auto;

		.item {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 15rpx 30rpx;
			margin: 15rpx 0rpx;
			border-radius: 10rpx;
			position: relative;
			overflow: hidden;

			.tips {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background-color: #18b566;
				color: #fff;
				padding: 10rpx;
				border-radius: 0rpx 0rpx 0rpx 10rpx;
			}

			.tips.Warning {
				background-color: #ff9900;
			}

			.tips.error {
				background-color: #fa3534;
			}

			.tips.success {
				background-color: #19be6b;
			}

			.header {
				.title {
					font-size: 32rpx;
					font-weight: bolder;
				}

				margin-bottom: 10rpx;
			}

			.content {
				display: flex;
				flex-direction: column;

				.line {
					display: flex;
					flex-direction: row;
					margin: 10rpx 0rpx;

					.label {
						margin-right: 30rpx;
						color: #82848a;
					}

					.value {
						color: #303133;
					}
				}
			}

			.btns {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				align-content: center;
				margin-top: 10rpx;
				border-top: 1rpx solid #e7e6e4;

				.btn {
					text-align: center;
					width: 50%;
					height: 81rpx;
					line-height: 81rpx;
				}

				.btn:nth-of-type(1) {
					border-right: 1rpx solid #e7e6e4;
				}
			}
		}
	}

	.tabs {
		background-color: #fff;
		padding-bottom: 15rpx;
	}
</style>